<!DOCTYPE >
<html>

	<head>
		<style>
			/*SWITCHES */
			
			.onoffswitch {
				position: relative;
				width: 54px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
			}
			.onoffswitch-checkbox {
				display: none;
			}
			.onoffswitch-label {
				display: block;
				overflow: hidden;
				cursor: pointer;
				border: 2px solid #1AB394;
				border-radius: 3px;
				height: 20px;
				line-height: 20px;
			}
			.onoffswitch-inner {
				display: block;
				width: 200%;
				margin-left: -100%;
				-webkit-transition: margin 0.3s ease-in 0s;
				transition: margin 0.3s ease-in 0s;
			}
			.onoffswitch-inner:before,
			.onoffswitch-inner:after {
				display: block;
				float: left;
				width: 50%;
				/* height: 16px; */
				padding: 0;
				/*  line-height: 16px; */
				font-size: 10px;
				color: white;
				font-family: Trebuchet, Arial, sans-serif;
				font-weight: bold;
				box-sizing: border-box;
			}
			.onoffswitch-inner:before {
				content: "ON";
				padding-left: 7px;
				background-color: #1AB394;
				color: #FFFFFF;
			}
			.onoffswitch-inner:after {
				content: "OFF";
				padding-right: 7px;
				background-color: #FFFFFF;
				color: #919191;
				text-align: right;
			}
			.onoffswitch-switch {
				display: block;
				width: 18px;
				margin: 0px;
				background: #FFFFFF;
				border: 2px solid #1AB394;
				border-radius: 3px;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 36px;
				-webkit-transition: all 0.3s ease-in 0s;
				transition: all 0.3s ease-in 0s;
			}
			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
				margin-left: 0;
			}
			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
				right: 0px;
			}
		</style>
	</head>

	<body>
		<div class="onoffswitch">
			<input type="checkbox" id="status" class="onoffswitch-checkbox" />
			<label class="onoffswitch-label" for="status">
	             <span class="onoffswitch-inner"></span>
	             <span class="onoffswitch-switch"></span>
	         </label>

		</div>
	</body>

</html>